<template>
	<view>
		<view>
			<view class="dhl" style="background-color: #E23C63;"></view>
			<view class="topbar box dis_f_c_c" style="background-color: #E23C63;color: #FFF;">
					接单管理
			<image  class="top_jt" src="../../static/icon/back2.png" mode="aspectFit" @click="go_back"></image>
			</view>
		</view>
		<view class="content">
			<view style="margin-bottom: 24rpx;">
				<u-tabs :list="list" bg-color="none" active-color="#222222" bar-height="4" inactive-color="#BBBBBB"
					:is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
			<view class="list" v-if="current == 0">
				<view v-if="lists !=''" class="list_box dis_f_co" v-for="(item,index) in lists"
						@click="info(item.id)">
						<view class="dis_f_sb_c" style="width: 100%;margin-bottom: 12rpx;">
							<view>{{item.title}}</view>
							<view style="color: #E23C63;">单价:{{item.task_money}}</view>
						</view>
						<view style="margin-bottom: 28rpx;">{{item.requirement}}</view>
						<view style="width: 100%;" class="dis_f_sb_c">
							<!-- <view style="color: #BBB;font-size: 22rpx;">人数:{{item.need_num}} 单价:{{item.task_money}}
								数量:{{item.task_num}}
								</view> -->
							<view>{{item.statustext}}</view>
						</view>
						
					</view>
					<view v-if="lists != ''" style="padding-bottom: 120rpx;">
						<u-loadmore :status="status" />
					</view>
					<view v-if="lists == ''">
						<u-empty style="padding-top: 80rpx;" text="暂时没有正在进行中的任务" mode="list"></u-empty>
					</view>
				</view>

				<view class="list" v-if="current == 1">
					<view v-if="lists !=''" class="list_box dis_f_co" v-for="(item,index) in lists"
						@click="info(item.id)">
						<view class="dis_f_sb_c" style="width: 100%;margin-bottom: 12rpx;">
							<view>{{item.title}}</view>
							<view style="color: #BBB;">{{item.addtime}}</view>
						</view>
						<view style="margin-bottom: 28rpx;padding-bottom:24rpx;border-bottom: 2rpx solid #EEE;">
							{{item.requirement}}</view>
						<view class="dis_f_sb_c" style="width: 100%;font-size: 22rpx;color: #BBB;margin-bottom: 12rpx;">
							<!-- <view>用户:2512555552</view> -->
							<view>完成时间:{{item.task_examine_time}}</view>
						</view>
						<view style="width: 100%;font-size: 22rpx;color: #BBB;margin-bottom: 36rpx;">
							文字验证:{{item.requirement}}</view>
						<view class="dis_f_l_c" style="font-size: 22rpx;color: #5EBCA3;">
							<!-- <view class="g_btn dis_f_c_c">查看完成进度</view> -->
							<view>{{item.statustext}}</view>
						</view>
						
					</view>
					<view  v-if="lists !=''" style="padding-bottom: 120rpx;">
						<u-loadmore :status="status" />
					</view>
					<view v-if="lists ==''">

						<u-empty style="padding-top: 80rpx;" text="暂时没有已返佣的任务" mode="list"></u-empty>

					</view>
				</view>
				<view class="list" v-if="current == 2">
					<view v-if="lists !=''" class="list_box dis_f_co" v-for="(item,index) in lists"
						@click="info(item.id)">
						<view class="dis_f_sb_c" style="width: 100%;margin-bottom: 12rpx;">
							<view>{{item.title}}</view>
							<view style="color: #BBB;">{{item.addtime}}</view>
						</view>
						<view style="margin-bottom: 28rpx;padding-bottom:24rpx;border-bottom: 2rpx solid #EEE;">
							{{item.requirement}}</view>
						<!-- <view class="dis_f_sb_c" style="width: 100%;font-size: 22rpx;color: #BBB;margin-bottom: 12rpx;">
							<view>用户:2512555552</view>
							<view>完成时间:2021-08-21</view>
						</view> -->
						<!-- <view style="width: 100%;font-size: 22rpx;color: #BBB;margin-bottom: 36rpx;">文字验证:1555555623</view> -->
						<view class="dis_f_sb_c" style="font-size: 22rpx;color: #E23C63;">
							<!-- <view class="g_btn dis_f_c_c">查看完成进度</view> -->
							<view>审核结果:{{item.task_examine_no}}</view>
							<view>{{item.statustext}}</view>
						</view>
					</view>
					<view  v-if="lists !=''" style="padding-bottom: 120rpx;">
						<u-loadmore :status="status" />
					</view>
					<view v-if="lists ==''">

						<u-empty style="padding-top: 80rpx;" text="暂时没有未通过的任务" mode="list"></u-empty>

					</view>
					
				</view>
				<view class="list" v-if="current == 3">
					<view v-if="lists !=''" class="list_box dis_f_co" v-for="(item,index) in lists"
						@click="info(item.id)">
						<view class="dis_f_sb_c" style="width: 100%;margin-bottom: 12rpx;">
							<view>{{item.title}}</view>
							<view style="color: #BBB;">{{item.addtime}}</view>
						</view>
						<view style="margin-bottom: 28rpx;padding-bottom:24rpx;border-bottom: 2rpx solid #EEE;">
							{{item.requirement}}</view>
						<view class="dis_f_sb_c" style="width: 100%;font-size: 22rpx;color: #BBB;margin-bottom: 12rpx;">
							<!-- <view>用户:2512555552</view> -->
							<view>提交时间:{{item.user_submit_time}}</view>
						</view>
					</view>
					<view  v-if="lists !=''" style="padding-bottom: 120rpx;">
						<u-loadmore :status="status" />
					</view>
					<view v-if="lists ==''">
						<u-empty style="padding-top: 80rpx;" text="暂时没有待审核的任务" mode="list"></u-empty>
					</view>
				</view>
				<view class="list" v-if="current == 4">
					<view class="list_box dis_f_co" v-for="(item,index) in feedback_list" @click="info(item.task_user_id)">
						<view class="dis_f_sb_c" style="width: 100%;margin-bottom: 12rpx;">
							<view>{{item.content}}</view>
							<!-- <view style="color: #BBB;">{{item.addtime}}</view> -->
						</view>
						<view style="margin-bottom: 28rpx;padding-bottom:24rpx;border-bottom: 2rpx solid #EEE;">{{item.requirement}}</view>
						<view class="dis_f_sb_c" style="width: 100%;font-size: 22rpx;color: #E23C63;margin-bottom: 12rpx;">
							<view>提交时间:{{item.addtime}}</view>
							<view>{{item.statustext}}</view>
						</view>
						<!-- <view style="width: 100%;font-size: 22rpx;color: #BBB;margin-bottom: 36rpx;">文字验证:{{item.requirement}}</view> -->
						<!-- <view class="dis_f_l_c" style="font-size: 22rpx;color: #5EBCA3;">
							<view class="g_btn dis_f_c_c">查看完成进度</view> -->
						<!-- <view>审核结果:已通过,佣金发放</view>
						</view> -->
					
					
				</view>
				<view v-if="feedback_list ==''">
					<u-empty style="padding-top: 80rpx;" text="暂时没有申诉" mode="list"></u-empty>
				</view>
			</view>
		</view>
		</view>
</template>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: '进行中'
				}, {
					name: '已返佣'
				}, {
					name: '未通过',
				}, {
					name: '待审核',
				},
				{
					name: '申述列表',
				}
				],
				current: 0,
				limit:10,
				page:1,
				lists:[],
				feedback_list:[],
				
				status: 'loadmore',
				zys:0,
			};
		},
		onShow() {
			if (uni.getStorageSync('token') == '') {
				this.$.ti_shi('请先登录账号');
				var that = this;
				setTimeout(function() {
					that.$.open('/pages/login/login');
				}, 2000);
			}
			this.getlist()
		},
		methods: {
			go_back(){
				this.$.open_tab('/pages/mine/mine')
			},
			change(index) {
				this.page = 1;
				this.current = index;
				//申述列表
				if(this.current == 4){
					this.getfeedbacklist();
				}else{
					this.getlist(index);
				}
				// this.getlist(index);
				// if(this.current == 2){

				// }
			},
			go_fb() {
				this.$.open('/pages/xuan_shang/fb')
			},
			info(id) {
				this.$.open('/pages/xuan_shang/xs_jd_xq?id=' + id)
			},
			getlist() {
				this.$.ajax(1, 'post', 'task/user_task_list', {
					uid: uni.getStorageSync('uid'),
					token: uni.getStorageSync('token'),
					status: this.current,
					limit: this.limit,
					page: this.page
				}, (res) => {
					if (res.code == 1) {
						this.lists = res.data
						this.zys = res.pagecount
						if(res.pagecount <2){
							this.status = 'nomore'
						}else{
							this.status = 'loadmore'
						}
					} else {
						this.$.ti_shi(res.msg);
						if (res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000);
						}
					}
				})
			},
			getfeedbacklist(status){
				this.$.ajax(1, 'post', 'task/user_task_feedback_list', {
				uid:uni.getStorageSync('uid'),
				token:uni.getStorageSync('token'),
				status:status,
				limit:this.limit,
				page:this.page
			}, (res) => {
				console.log(1111);
				if(res.code == 1){
					this.feedback_list = res.data;
				}else{
					this.$.ti_shi(res.msg);
					if(res.code == 9) {
						var that = this;
						setTimeout(function() {
							that.$.open('/pages/login/login');
						}, 2000);
					} 
				}
			})
			},
		},
		onReachBottom() {
			// var xiabiao = this.current;
			
			
			console.log(this.zys)
			if(this.page+1 <= this.zys){
				this.page = ++this.page;
				console.log(this.page)
				this.$.ajax(1, 'post', 'task/user_task_list', {
					uid: uni.getStorageSync('uid'),
					token: uni.getStorageSync('token'),
					status: this.current,
					limit: this.limit,
					page: this.page
				}, (res) => {
					if (res.code == 1) {
						// this.lists = res.data
						this.zys = res.pagecount
						if(res.data != ''){
							res.data.forEach((item,index)=>{
								this.lists.push(item);
							})
							console.log(this.lists)
							this.status = 'loading';
							// console.log(222)
						}
						this.zys = res.pagecount
						if(res.pagecount <2){
							this.status = 'nomore'
						}else{
							this.status = 'loadmore'
						}
					} else {
						this.$.ti_shi(res.msg);
						if (res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000);
						}
					}
				})
				
			}else{
				this.status = 'nomore';
				return;
			}
			
			
		}
	}
</script>

<style lang="scss">
	.dhl {
		// position: absolute;
		width: 100%;
		height: var(--status-bar-height);
		position: fixed;
		top: 0;
		z-index: 999;
	}
	.topbar {
		width: 100%;
		z-index: 999;
		height: 88rpx;
		position: fixed;
		top: var(--status-bar-height);
		font-size: 34rpx;
		color: #212730;
		font-weight: bold;
		// background-image: url(../../static/index/bg.png);
		// padding: 0 0 26rpx 0rpx;
		
		.top_jt {
			width: 18rpx;
			height: 32rpx;
			position: absolute;
			left: 40rpx;
			top: 28rpx;
		}
	}
	.r_btn {
		position: fixed;
		z-index: 999;
		top: calc(var(--status-bar-height) + 22rpx);
		right: 48rpx;
		color: #fff;

		image {
			width: 32.99rpx;
			margin-right: 6rpx;
			height: 34rpx;
		}
	}

	.content {
		width: 100%;
		padding-top: calc(var(--status-bar-height) + 88rpx);

		.list {
			padding: 0 24rpx;
			width: 100%;

			.list_box {
				width: 100%;
				background-color: #fff;
				margin-bottom: 12rpx;
				border-radius: 20rpx;
				box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
				padding: 36rpx 24rpx;

				.btn1 {
					width: 102rpx;
					height: 48rpx;
					border: 2rpx solid #5EBCA3;
					color: #5EBCA3;
					font-size: 22rpx;
					margin-right: 12rpx;
					border-radius: 10rpx;
				}

				.btn2 {
					width: 144rpx;
					height: 48rpx;
					border: 2rpx solid #6DADBE;
					color: #6DADBE;
					font-size: 22rpx;
					margin-right: 12rpx;
					border-radius: 10rpx;
				}

				.g_btn {
					width: 196rpx;
					height: 48rpx;
					border-radius: 10rpx;
					border: 2rpx solid #5EBCA3;
					margin-right: 24rpx;

				}
			}
		}
	}
</style>
